<template>
  <div class="song-list-page">
    <div v-for="(item,index) in songs"
         :key="item.id"
         class="flex_center song_list_item"
         @click="$emit('select',index,item)">
      <div v-show='rank'
           :class='[rankStyle(index),"rank_icon"]'>
        {{rankText(index)}}
      </div>
      <div class="item_center">
        <p class="song_list_songname">{{item.songname}}</p>
        <p class="song_list_author">{{item.singer}} - {{item.albumname}}</p>
      </div>
    </div>
  </div>
</template>

<script>
// 歌曲列表
export default {
  props: {
    songs: {
      type: Array,
      default: null
    },
    rank: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    rankStyle (i) {
      return i > 2 ? 'text' : `icon${i}`
    },
    rankText (i) {
      return i > 2 ? i + 1 : ''
    }
  },
  mounted () {
  },
  watch: {
    songs (to, from) {
    }
  }
}
</script>

<style  lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.song_list_item
  padding 12px
  font-size 14px
  .item_center
    margin-left 12px
    overflow hidden
    p
      text-ellipsis()
  .song_list_songname
    margin-bottom 10px
  .song_list_author
    color $color-text-d
  .rank_icon
    flex 0 0 25px
    width 25px
    height 25px
    margin 0 15px
    line-height 25px
    color $color-theme
    text-align center
    background-size cover
    font-size $font-size-large
    &.icon0
      bg-image('./rank-icon/first')
    &.icon1
      bg-image('./rank-icon/second')
    &.icon2
      bg-image('./rank-icon/third')
</style>